<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title></title>
    <link href="/static/bower_components/jquery-ui/themes/base/jquery-ui.css" rel="stylesheet">

    <style>
        html, body {
            width: 100%;
            overflow: hidden;
        }
        input {
            width: 26rem;
            height: 4rem;
            border: 1px solid black;
            font-size: 3rem;
            outline-style: none;
            caret-color: red;
            padding-left: 20px;
            border-radius: .5rem;
        }

        input:focus {
            border-bottom: 6px solid black;
        }

        td {
            height: 9rem;
        }

        tr td:nth-of-type(1) {
            text-align-last: justify;
            padding-left: 2rem;
        }

        tr td:nth-of-type(2) {
            padding-left: 2rem;
        }

        li {
            list-style: none;
            width: 98%;
        }

        li:hover {
            background-color: #1c94c4;
        }


    </style>
</head>
<body style="font-size: 50px;background: url('static/images/wx_bj/index_bj.jpg') no-repeat;overflow: hidden;background-size: 100% 100%">
<header style="
    height: 36%;
    ">
</header>
<section style="width: 98%;margin: 0 auto;position: relative">
    <form id="from" onsubmit="return false">
        <input id="openid" name="openid" th:value="${staff.getOpenId()}" type="hidden">
        <input id="answerType" name="answerType" th:value="${answerType}" type="hidden">
        <input id="url" name="url" th:value="${url}" type="hidden">
        <div style="width: 95%;padding: 20px 0 20px;margin: auto;background-color: rgba(120,109,109,.1);border-radius: 10px;box-shadow: 1px 1px 10px #888888;">
            <table style="margin: auto">
                <tr>
                    <td style="color: #5a695e;">姓名</td>
                    <td><label for="name">
                        <input id="name" minlength="2" name="name" placeholder="&nbsp;请输入真实姓名" required="required"
                               th:value="${staff.getName()}" type="text">
                    </label></td>
                </tr>
                <tr>
                    <td style="color: #5a695e;">电话</td>
                    <td>
                        <input digits="true" id="telephoneNumber" maxlength="11" minlength="11" name="telephoneNumber"
                               placeholder="&nbsp;请输入手机号码" required="required" type="tel">
                    </td>
                </tr>
                <tr>
                    <label for="companyName">
                        <td style="color: #5a695e;">单位</td>
                    </label>
                    <td>
                        <input id="companyName" placeholder="&nbsp;请选择单位" type="text"/>
                    </td>
                </tr>
            </table>
            <div style="text-align: center;margin: 2rem">
                <input id="submi"
                       style="margin: auto;background-color: #AD1C1F;color: white; height: 5rem; width: 33.5rem;font-size: 3.2rem"
                       type="submit"
                       value="确定"
                       width="200">
            </div>
        </div>
    </form>
    <div id="list_select" style=" position: absolute;
    display: none;
    height: 100%;
    left: 0;
    width: 100%;
    top: 0;
    overflow: auto;
    background-color: rgba(255,255,255,0.9);
    border-radius: 52px;
    border: black 1px solid;
    font-size: 2rem;
    text-align-last: center;
    text-align: center;">
        <ul id="url_list" style="width: 95%;margin: auto;">
            <li style="font-size: 2.2rem;line-height: 5.2rem" class="item" th:each="item:${items}" th:text="${item}">
            </li>
        </ul>
    </div>
</section>

<script src="/static/js/jquery-1.10.2.min.js"></script>
<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/jquery.validate.min.js"></script>
<script src="https://static.runoob.com/assets/jquery-validation-1.14.0/dist/localization/messages_zh.js"></script>
<script src="/static/js/jquery-ui.js"></script>
<script>

       let args = ["金台区总工会", "渭滨区总工会", "陈仓区总工会", "凤翔区总工会", "岐山县总工会",
           "扶风县总工会", "眉县总工会", "陇县总工会", "千阳县总工会", "凤县总工会", "太白县总工会",
           "麟游县总工会", "市直机关工会工委", "高新区工会工委", "宝鸡市财贸工会", "宝鸡市教育工会", "陕西秦川机床工具集团有限公司", "陕西西凤酒集团股份有限公司", "陕西中烟工业有限责任公司宝鸡卷烟厂", "陕西法士特汽车传动集团有限责任公司", "陕汽集团商用车有限公司", "宝鸡机床集团有限公司", "陕西金鼎铸造有限公司",
           "陕西红旗民爆集团股份有限公司", "宝鸡中燃城市燃气发展有限公司", "陕西郭家河煤业有限责任公司", "宝鸡市第二建筑工程有限责任公司", "宝鸡市中心医院", "宝鸡市人民医院", "宝鸡市中医院",
           "宝鸡市第二人民医院", "宝鸡市第三人民医院", "陕西省宝鸡市妇幼保健院", "宝鸡中学", "宝鸡市宝运汽车运输（集团）有限公司", "宝鸡市公共交通有限责任公司", "宝钛集团有限公司",
           "宝鸡九州纺织有限责任公司", "宝鸡市蜂业集团公司", "中国电信股份有限公司宝鸡分公司", "宝鸡聚丰房地产开发集团有限公司", "宝鸡市邮政管理局", "宝鸡市金属行业工会联合会", "宝鸡第一人才网", "陕汽集团有限公司", "陕西法士特集团", "中铁宝桥股份有限公司", "宝鸡市盐业总公司",
           "宝鸡市中燃公司", "宝鸡开元商城公司", "宝鸡大荣纺织有限责任公司", "宝鸡石油机械有限责任公司", "西电陕西陕开电器集团有限公司", "陕西宝光集团有限公司",
           "益门粮库", "辰济药业", "天健药业", "陕西天润金属", "铁路技师学院", "第二商贸学院"];
    $(function () {
        let innerHeight = window.innerHeight;
        $("body").height(innerHeight + 'px');

    })
    $('#from').submit(function () {
        let openid = $('#openid').val();
        let name = $('#name').val();
        let companyName = $('#companyName').val();
        let telephoneNumber = $('#telephoneNumber').val();
        let answerType = $('#answerType').val();
        let url = $('#url').val();

        
        $("#submi").attr("disabled", true).val("正在注册...").css('backgroundColor', '#888888');
        $.post(
            "/infoCompletion",
            {
                openId: openid,
                name: name,
                company: companyName,
                phone: telephoneNumber,
            },
            function (result) {
                if (result) {
                    window.location.replace("/" + url + "?id=" + openid + "&&answerType=" + answerType);
                } else {
                    alert("提交失败");
                }
            }
        )
    })


    $("#companyName").focus(function () {
        $("#list_select").show();
        document.activeElement.blur();
    })
    $("#companyName").click(function () {
        $("#list_select").show();
        document.activeElement.blur();
    })

    $(document).on("click", ".item", function () {
        $("#companyName").val($(this).text());
        $("#list_select").hide();
    })

</script>
</body>
</html>